<template>
    <div :class="['pagination f-tac f-fs14',totalPage===1 && 'page-visabel']">
        <span :class="['prev',{'disabled':value==1||showPage>totalPage}]" @click="prePageHandle">&lt;</span>
        <span v-for="(page,index) in showPage" :key="index"
        :class="['page',{'active':(changeStart + page-1)==value},{'f-vh':page>totalPage}]"
        @click="changeShow(changeStart + page-1)"
        >{{changeStart + page-1}}</span>
        <span :class="['next',{'disabled':value==totalPage||showPage>totalPage}]" @click="nextPageHandle">&gt;</span>
        <span class="total">共 {{total}} 条 / {{totalPage}} 页</span>
        <!--<span class="jump">
            前往
            <input type="text" v-model="val" @keydown.enter="jump"/>
            页
        </span>-->
    </div>
</template>
<script>
export default {
	name:'pagination',
    props:{
        total:{
            type:Number
        },
        prepage:{
            type:Number,
            default:2
        },
        totalPage:{
            type:Number
        },
        showPage:{//页面中要显示几个页码
            type:Number,
            default:3
        },
        value:{
            type:Number
        }
    },
    data(){
        return {
            //pages:this.pageSize,Math.ceil(this.total/this.prepage)计算需要展示的总页数
            val:'',//记录输入框中的值
            currentPage:1,//记录当前页
            posPage:Math.floor(this.showPage/2)+1,//超过这个页码时，固定显示的位置
            start:1,//第一个页码的开始数字
        }
    },
    computed:{
        changeStart(){//分页逻辑
            if(this.totalPage<=this.showPage){
                return this.start = 1
            }else{
                if(this.currentPage<=this.posPage){
                    return this.start = 1
                }else if(this.totalPage-this.currentPage<=this.posPage){
                    return  this.start = this.totalPage - this.showPage + 1
                }else{
                    return  this.start = this.currentPage - this.posPage + 1
                }
            }
        }
    },
    methods:{
        changeShow(page){
            this.currentPage = page
            this.$emit('input',page)
        },
        jump(){
            if(this.val<1){
                this.val = 1
            }
            if(this.val>this.totalPage){
                this.val = this.totalPage
            }
            this.val = Math.floor(this.val)
            this.$emit('input',this.val)
            this.currentPage = this.val
            this.val = ''
        },
        prePageHandle(){
            this.currentPage--
            if(this.currentPage<1){
                this.currentPage = 1;
                return;
            }
            this.$emit('input',this.currentPage)
        },
        nextPageHandle(){
            this.currentPage++;
            if(this.currentPage>this.totalPage){
                this.currentPage = this.totalPage
                return;
            }

            this.$emit('input',this.currentPage)

        }

    },
    mounted(){
        /*使用方法
		<pagination :total="pageTotal" @input="pageChange" :prepage="3" :show-page="3" :total-page="pageSize"  v-model="sPage"/>
		data(){
			pageTotal:1,
			pageSize:1,
			sPage:1
		},
		methods:{
			pageChange(){//分页切换
				
			}
		}
		created(){
			this.$ajax.xxx().then(({allnum,total})=>{
				this.pageTotal=allnum;//数据总条数
				this.pageSize=total;//分页数
			})
		}
		*/
    }

}
</script>
<style scoped lang="less">


.pagination {
    margin-top: 10%;
    user-select:none;
}
.page-visabel{
    visibility: hidden;
}
.pagination span {
    margin: 0 10px;
    display: inline-block;
    padding:5px 10px;
}

.pagination span.page, .pagination span.prev, .pagination span.next {
    cursor: pointer;
    background-color: #ccc;
}

.pagination span.page:hover {
    background-color: #409eff;
    color:#fff;
}

.pagination span.page.active {
    background-color: #409eff;
    color:#fff;
    cursor: default;
}

.pagination span.prev.disabled, .pagination span.next.disabled {
    color: #eee;
    cursor: not-allowed;
}

.pagination input[type='text'] {
    padding: 2px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    width: 60px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    outline: none;
    transition: .2s all;
}
.pagination input[type='text']:focus {
    border-color: #409eff;
}
</style>